<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html>
<head>
    <%--第一步--%>
    <!-- 获取CSRF Token -->
    <meta name="_csrf" content="${_csrf.token}"/>
    <!-- 获取CSRF头，默认为X-CSRF-TOKEN -->
    <meta name="_csrf_header" content="${_csrf.headerName}"/>
    <meta charset="utf-8">
    <title>layui</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/statics/layui/lib/layui-v2.5.5/css/layui.css" media="all">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/statics/layui/css/public.css" media="all">
</head>
<body>
<div class="layuimini-container">
    <div class="layuimini-main">

        <!-- 搜索条件 -->
        <fieldset class="table-search-fieldset">
            <legend>搜索信息</legend>
            <div style="margin: 10px 10px 10px 10px">
                <form class="layui-form layui-form-pane" action="">
                    <div class="layui-form-item">
                        <div class="layui-inline">
                            <label class="layui-form-label">登陆名称</label>
                            <div class="layui-input-inline">
                                <input type="text" name="userName" autocomplete="off" class="layui-input">
                            </div>
                        </div>
                        <div class="layui-inline">
                            <label class="layui-form-label">真实姓名</label>
                            <div class="layui-input-inline">
                                <input type="text" name="realName" autocomplete="off" class="layui-input">
                            </div>
                        </div>
                        <div class="layui-inline">
                            <label class="layui-form-label">用户状态</label>
                            <div class="layui-input-inline">
                                <select name="status" autocomplete="off" class="layui-input">
                                    <option value="">请选择用户状态</option>
                                    <option value="1">正常</option>
                                    <option value="0">禁用</option>
                                </select>
                            </div>
                        </div>
                        <div class="layui-inline">
                            <label class="layui-form-label">用户性别</label>
                            <div class="layui-input-inline">
                                <select name="sex" autocomplete="off" class="layui-input">
                                    <option value="">请选择性别</option>
                                    <option value="1">男</option>
                                    <option value="0">女</option>
                                </select>
                            </div>
                        </div>
                        <%--<div class="layui-inline">
                            <label class="layui-form-label">所属角色</label>
                            <div class="layui-input-inline">
                                <select name="roleId" autocomplete="off" class="layui-input">
                                    <option value="">请选择角色</option>
                                </select>
                            </div>
                        </div>--%>
                        <div class="layui-inline">
                            <label class="layui-form-label">所属部门</label>
                            <div class="layui-input-inline">
                                <select name="deptId" autocomplete="off" id="s_deptId" class="layui-input">
                                    <option value="">请选择部门</option>
                                </select>
                            </div>
                        </div>
                        <div class="layui-inline">
                            <label class="layui-form-label">开始日期</label>
                            <div class="layui-input-inline">
                                <input type="text" name="startDate" id="startTime" autocomplete="off" class="layui-input" readonly>
                            </div>
                        </div>
                        <div class="layui-inline">
                            <label class="layui-form-label">结束日期</label>
                            <div class="layui-input-inline">
                                <input type="text" name="endDate" id="endTime" autocomplete="off" class="layui-input" readonly>
                            </div>
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <div class="layui-input-block" style="text-align: center">
                            <button type="submit" class="layui-btn"  lay-submit lay-filter="data-search-btn"><i class="layui-icon layui-icon-search"></i>搜索</button>
                            <button type="reset" class="layui-btn layui-btn-warm"><i class="layui-icon layui-icon-refresh-1"></i>重置</button>
                        </div>
                    </div>
                </form>
            </div>
        </fieldset>

        <!-- 表格工具栏 -->
        <script type="text/html" id="toolbarDemo">
            <div class="layui-btn-container">
                <button class="layui-btn layui-btn-normal layui-btn-sm data-add-btn" lay-event="add"><i class="layui-icon layui-icon-add-1"></i>添加 </button>
            </div>
        </script>

        <!-- 数据表格 -->
        <table class="layui-hide" id="currentTableId" lay-filter="currentTableFilter"></table>

        <!-- 行工具栏 -->
        <script type="text/html" id="currentTableBar">
            <a class="layui-btn layui-btn-xs data-count-edit" lay-event="edit"><i class="layui-icon layui-icon-edit"></i>编辑</a>
            <a class="layui-btn layui-btn-xs layui-btn-danger data-count-delete" lay-event="delete"><i class="layui-icon layui-icon-close"></i>删除</a>
            <button class="layui-btn layui-btn-xs layui-btn-warm" lay-event="detail"><i class="layui-icon layui-icon-form"></i>详细信息</button>
            <button class="layui-btn layui-btn-xs" lay-event="grantRole"><i class="layui-icon layui-icon-password"></i>分配角色</button>
        </script>

        <!-- 添加和修改窗口 -->
        <div style="display: none;padding: 5px" id="addOrUpdateWindow">
            <form class="layui-form" style="width:90%;" id="dataFrm" lay-filter="dataFrm">
                <!-- 隐藏域，保存用户id -->
                <input type="hidden" name="id" id="id">

                <div class="layui-form-item">
                    <div class="layui-inline">
                        <label class="layui-form-label">登陆名称</label>
                        <div class="layui-input-block">
                            <input type="text" name="userName" id="userName" lay-verify="required"  autocomplete="off" placeholder="请输入登陆名称" class="layui-input">
                        </div>
                    </div>
                    <div class="layui-inline">
                        <label class="layui-form-label">用户姓名</label>
                        <div class="layui-input-block">
                            <input type="text" name="realName" id="realName" lay-verify="required" autocomplete="off" placeholder="请输入用户姓名" class="layui-input">
                        </div>
                    </div>
                </div>
                <div class="layui-form-item">
                    <div class="layui-inline">
                        <label class="layui-form-label">用户性别</label>
                        <div class="layui-input-block">
                            <input type="radio" name="sex" value="1" title="男" checked>
                            <input type="radio" name="sex" value="0" title="女" >
                        </div>
                    </div>
                    <div class="layui-inline">
                        <label class="layui-form-label">用户状态</label>
                        <div class="layui-input-block">
                            <input type="radio" name="status" value="1" title="正常" checked>
                            <input type="radio" name="status" value="0" title="禁用" >
                        </div>
                    </div>
                </div>
                <div class="layui-form-item">
                    <div class="layui-inline">
                        <label class="layui-form-label">入职日期</label>
                        <div class="layui-input-block">
                            <input type="text" name="hireDate" id="hireDate" readonly lay-verify="required" autocomplete="off" placeholder="请选择入职日期" class="layui-input">
                        </div>
                    </div>
                    <div class="layui-inline">
                        <label class="layui-form-label">所属部门</label>
                        <div class="layui-input-block">
                            <select name="deptId" id="deptId" class="layui-input">
                                <option value="">请选择部门</option>
                            </select>
                        </div>
                    </div>
                </div>
                <div class="layui-form-item">
                    <div class="layui-inline">
                        <label class="layui-form-label">用户邮箱</label>
                        <div class="layui-input-block">
                            <input type="text" name="email" id="email" lay-verify="required|email" autocomplete="off" placeholder="请输入用户邮箱" class="layui-input">
                        </div>
                    </div>
                    <div class="layui-inline">
                        <label class="layui-form-label">用户手机号</label>
                        <div class="layui-input-block">
                            <input type="text" name="phone" id="phone" lay-verify="required|phone" autocomplete="off" placeholder="请输入用户手机号" class="layui-input">
                        </div>
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">用户备注</label>
                    <div class="layui-input-block">
                        <textarea class="layui-textarea" name="remark" id="remark"></textarea>
                    </div>
                </div>


                <div class="layui-form-item layui-row layui-col-xs12">
                    <div class="layui-input-block" style="text-align: center;">
                        <button type="button" class="layui-btn" lay-submit lay-filter="doSubmit"><span class="layui-icon layui-icon-add-1"></span>提交</button>
                        <button type="reset" class="layui-btn layui-btn-warm resetBtn"><span class="layui-icon layui-icon-refresh-1"></span>重置</button>
                        <button type="button" class="layui-btn layui-btn-normal closeWindowBtn"><span class="layui-icon layui-icon-return"></span>返回</button>
                    </div>
                </div>
            </form>
        </div>
        <!-- 用户详情窗口 -->
        <div style="display: none;padding: 5px" id="detailWindow">
            <form class="layui-form" style="width:90%;" lay-filter="dataFrm">
                <div class="layui-form-item">
                    <div class="layui-inline">
                        <label class="layui-form-label">登陆名称</label>
                        <div class="layui-input-block">
                            <input type="text" name="userName" lay-verify="required" disabled autocomplete="off" class="layui-input">
                        </div>
                    </div>
                    <div class="layui-inline">
                        <label class="layui-form-label">用户姓名</label>
                        <div class="layui-input-block">
                            <input type="text" name="realName" disabled class="layui-input">
                        </div>
                    </div>
                </div>
                <div class="layui-form-item">
                    <div class="layui-inline">
                        <label class="layui-form-label">入职日期</label>
                        <div class="layui-input-block">
                            <input type="text" name="hireDate" disabled class="layui-input">
                        </div>
                    </div>
                    <div class="layui-inline">
                        <label class="layui-form-label">所属部门</label>
                        <div class="layui-input-block">
                            <select name="deptId" class="layui-input" disabled>
                                <option value="">请选择部门</option>
                            </select>
                        </div>
                    </div>
                </div>
                <div class="layui-form-item">
                    <div class="layui-inline">
                        <label class="layui-form-label">用户性别</label>
                        <div class="layui-input-block">
                            <input type="radio" name="sex" value="1" title="男" disabled checked>
                            <input type="radio" name="sex" value="0" title="女" disabled>
                        </div>
                    </div>
                    <div class="layui-inline">
                        <label class="layui-form-label">用户状态</label>
                        <div class="layui-input-block">
                            <input type="radio" name="status" value="1" title="正常" disabled checked>
                            <input type="radio" name="status" value="0" title="禁用" disabled>
                        </div>
                    </div>
                </div>
                <div class="layui-form-item">
                    <div class="layui-inline">
                        <label class="layui-form-label">用户邮箱</label>
                        <div class="layui-input-block">
                            <input type="text" name="email" disabled class="layui-input">
                        </div>
                    </div>
                    <div class="layui-inline">
                        <label class="layui-form-label">用户手机号</label>
                        <div class="layui-input-block">
                            <input type="text" name="phone" disabled class="layui-input">
                        </div>
                    </div>
                </div>
                <div class="layui-form-item">
                    <div class="layui-inline">
                        <label class="layui-form-label">创建人</label>
                        <div class="layui-input-block">
                            <input type="text" name="createdByStr" disabled class="layui-input">
                        </div>
                    </div>
                    <div class="layui-inline">
                        <label class="layui-form-label">创建时间</label>
                        <div class="layui-input-block">
                            <input type="text" name="createDate" disabled class="layui-input">
                        </div>
                    </div>
                </div>
                <div class="layui-form-item">
                    <div class="layui-inline">
                        <label class="layui-form-label">修改人</label>
                        <div class="layui-input-block">
                            <input type="text" name="modifyByStr" disabled class="layui-input">
                        </div>
                    </div>
                    <div class="layui-inline">
                        <label class="layui-form-label">修改时间</label>
                        <div class="layui-input-block">
                            <input type="text" name="modifyDate" disabled class="layui-input">
                        </div>
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">用户备注</label>
                    <div class="layui-input-block">
                        <textarea class="layui-textarea" name="remark" disabled></textarea>
                    </div>
                </div>
                <div class="layui-form-item layui-row layui-col-xs12">
                    <div class="layui-input-block" style="text-align: center;">
                        <button type="button" class="layui-btn closeWindowBtn"><span class="layui-icon layui-icon-ok"></span>确认</button>
                    </div>
                </div>
            </form>
        </div>

        <!-- 用户分配角色弹出层 -->
        <div style="display: none;padding: 5px" id="selectUserRoleDiv">
            <fieldset class="layui-elem-field layui-field-title" style="margin-top: 10px;">
                <legend style="text-align: center;color: #009f95">请选择角色</legend>
            </fieldset>
            <table class="layui-hide" id="roleTable" lay-filter="roleTable"></table>
        </div>

    </div>
</div>
<script src="${pageContext.request.contextPath}/statics/layui/lib/layui-v2.5.5/layui.js" charset="utf-8"></script>
<script>
    layui.use(['form', 'table','laydate','jquery'], function () {
        var $ = layui.jquery,
            form = layui.form,
            laydate = layui.laydate,
            table = layui.table;

        //渲染日期组件
        laydate.render({
            elem: '#startTime', //指定元素
            type: 'date'
        });
        laydate.render({
            elem: '#endTime', //指定元素
            type: 'date'
        });
        laydate.render({
            elem: '#hireDate' //指定元素
        });

        //渲染表格组件
        var tableIns = table.render({
            elem: '#currentTableId',
            url: '${pageContext.request.contextPath}/user/list',
            toolbar: '#toolbarDemo',
            cols: [[
                {field: 'id', width: 90, title: '用户编号', align: "center"},
                {field: 'userName', width: 100, title: '登录名', align: "center"},
                {field: 'realName', width: 100, title: '真实姓名', align: "center"},
                {field: 'sex', width: 80, title: '性别', align: "center",templet:function (b) {return b.sex == 0 ? '<font color="red">女</font>' : '<font color="blue">男</font>';}},
                {field: 'deptId', width: 100, title: '所属部门', align: "center",templet:function (b) {return b.department.deptName;}},
                {field: 'hireDate', width: 120, title: '入职日期',sort:true, align: "center"},
                {field: 'status', width: 70, title: '状态', align: "center",templet:function (b) {return b.status == 0 ? '<font color="red">禁用</font>' : '<font color="green">正常</font>';}},
                {field: 'email', width: 160, title: '邮箱', align: "center"},
                {field: 'phone', width: 120, title: '电话', align: "center"},
                {field: 'createdByStr', hide:true, title: '创建人'},
                {field: 'createDate', hide:true, title: '创建时间'},
                {field: 'modifyByStr', hide:true, title: '创建人'},
                {field: 'modifyDate', hide:true, title: '修改时间'},
                {title: '操作', toolbar: '#currentTableBar', align: "center"}
            ]],
            page: true,
            done: function (res, curr, count) {
                //判断当前页码是否是大于1并且当前页的数据量为0
                if (curr > 1 && res.data.length == 0) {
                    var pageValue = curr - 1;
                    //刷新数据表格的数据
                    tableIns.reload({
                        page: {curr: pageValue}
                    });
                }
            }
        });

        //监听查询条件按钮
        form.on("submit(data-search-btn)",function (data) {
            tableIns.reload({
                where:data.field,
                page:{
                    curr:1
                }
            });
            return false;
        });

        //2 security 中使用post提交
        //获取<meta>标签中封装的CSRF Token
        var token = $("meta[name='_csrf']").attr("content");
        var header = $("meta[name='_csrf_header']").attr("content");
        //将头中的CSRF Token信息进行发送
        $(document).ajaxSend(function (e,xhr,options) {
            xhr.setRequestHeader(header,token);
        });

        //默认加载时调用一次
        loadDeptSelect();
        //查询下拉列表的部门集合
        function loadDeptSelect(){
            $.post("/dept/findDeptList",function (result) {
                let html = "<option value=''>请选择部门</option>";
                for(let i of result){
                    html += "<option value='"+ i.id +"'>" + i.deptName + "</option>";
                }
                $("[name='deptId']").html(html);
                form.render("select");
            },'json');
        };

        //添加
        //表头添加数据
        table.on('toolbar(currentTableFilter)',function (obj) {//lay-filter属性
            switch (obj.event) {
                case 'add':
                    openAddWindow();//添加
                    break;
            }
        });
        //定义添加和修改的url 以及弹出层对象
        let url,mainIndex;
        //添加方法
        function openAddWindow() {
            mainIndex = layer.open({
                type : 1, //弹出层类型
                title : '添加用户',
                area : ['750px','460px'],//宽高
                content : $('#addOrUpdateWindow'),//面板内容
                success : function () {
                    //清空表单数据
                    $('#dataFrm')[0].reset();
                    //设置表单提交的url
                    url = '/user/add';
                    $('#userName').css('border','1px solid #E6E6E6');
                    //更新部门下拉列表
                    loadDeptSelect();
                }
            });
        }
        //如果登录名称重复 当登录名称获得焦点时改回边框样式
        $('#userName').blur(function () {
            $(this).css('border','1px solid #E6E6E6');
        })
        //重置按钮点击事件
        $('.resetBtn').click(function () {
            $('#userName').css('border','1px solid #E6E6E6');
        })
        //监听表单提交事件
        form.on('submit(doSubmit)',function (data) {
            $.post(url,data.field,function (result) {
                if(result.exist){
                    layer.msg(result.message,{icon:0});
                    $('#userName').css('border','1px solid red');
                }else{
                    if(result.success){
                        layer.msg(result.message,{icon:1});
                        layer.close(mainIndex);//关闭窗口
                        tableIns.reload();//刷新表格
                    }else{
                        layer.msg(result.message,{icon:2});
                    }
                }
            },'json');
        });

        //行编辑修改和删除
        table.on('tool(currentTableFilter)',function (obj) {//与表格的lay-filter属性绑定
            let rowData = obj.data;
            switch (obj.event) {
                case 'edit':
                    mainIndex = layer.open({
                        type : 1, //弹出层类型
                        title : '编辑用户',
                        area : ['750px','460px'],//宽高
                        content : $('#addOrUpdateWindow'),//面板内容
                        success : function () {
                            //设置表单提交的url
                            url = '/user/update';
                            //给修改表单赋值
                            form.val('dataFrm',rowData);
                            $('#userName').css('border','1px solid #E6E6E6');
                        }
                    });
                break;
                case 'delete':
                    $.post("/role/checkRoleByUser",{roleId:rowData.id},function (result) {
                            layer.confirm("确定删除该用户及该用户所占的用户角色表中的信息吗？",{icon:3,title:'请确认'},function (index) {
                                $.post("/user/del",{userId:rowData.id},function (result) {
                                    if(result.success){
                                        layer.msg(result.message,{icon:1});
                                        tableIns.reload();
                                    }else{
                                        layer.msg(result.message,{icon:2});
                                    }
                                },'json');
                                layer.close(index);
                            });
                    },'json');
                    break;
                case 'detail':
                    mainIndex = layer.open({
                        type : 1, //弹出层类型
                        title : "ID为 ["+ rowData.id +"] 的详细信息",
                        area : ['750px','570px'],//宽高
                        content : $('#detailWindow'),//面板内容
                        success : function () {
                            //给修改表单赋值
                                form.val('dataFrm',rowData);
                        }
                    });
                    break;
                case 'grantRole':
                    mainIndex = layer.open({
                        type : 1, //弹出层类型
                        title : "给["+ rowData.realName +"]分配角色",
                        area : ['750px','460px'],//宽高
                        content : $('#selectUserRoleDiv'),//面板内容
                        btn:['提交','取消'],
                        yes:function(index,layero){
                            let checkStatus = table.checkStatus('roleTable'); //idTest 即为基础参数
                            if(checkStatus.data.length > 0){
                                let idArr = [];
                                for(let i of checkStatus.data){
                                    idArr.push(i.id);
                                }
                                let ids = idArr.join(',');
                                $.post("/user/addRoleByuserId",{'ids':ids,'userId':rowData.id},function (result) {
                                    if(result.success){
                                        layer.msg(result.message,{icon:1});
                                    }else{
                                        layer.msg(result.message,{icon:2});
                                    }
                                    layer.close(index);
                                },'json');
                            }else{
                                layer.msg("请至少添加一条角色信息！");
                            }
                        },
                        btn2:function(index,layero){
                        },
                        success : function () {
                            var tableIns = table.render({
                                elem: '#roleTable',
                                url: '${pageContext.request.contextPath}/role/addRoleByUserId?userId=' + rowData.id,
                                cols: [[
                                    {type:'checkbox'},
                                    {field: 'id', title: "角色编号",align: 'center'},
                                    {field: 'roleCode', title: '角色编码',align: 'center'},
                                    {field: 'roleName', title: '角色名称',align: 'center'},
                                    {field: 'roleDesc', title: '角色描述',align: 'center'},
                                ]],
                                done: function (res, curr, count) {
                                    //判断当前页码是否是大于1并且当前页的数据量为0
                                    if (curr > 1 && res.data.length == 0) {
                                        var pageValue = curr - 1;
                                        //刷新数据表格的数据
                                        tableIns.reload({
                                            page: {curr: pageValue}
                                        });
                                    }
                                }
                            });
                        }
                    });
                    break;
            }
        });
        //关闭详细信息面板
        $('.closeWindowBtn').click(function () {
            layer.close(mainIndex);
        })
    });
</script>

</body>
</html>
